<template>
  <view class="safe-area-container">
    <view class="container">
      <view class="header">
        <text class="title">{{ deviceTitle }}统计</text>
      </view>

      <!-- 24小时数据趋势 -->
      <view class="chart-container">
        <text class="chart-title">24小时{{ deviceTitle }}趋势</text>
        <canvas
            type="2d"
            id="dailyDeviceChart"
            canvas-id="dailyDeviceChart"
            class="device-canvas"
            @touchstart="onChartTouch('daily', $event)"
            @touchend="onChartTouchEnd"
        ></canvas>

        <!-- 动态数据提示框 -->
        <view
            v-if="dailyDataTooltip.show"
            class="data-tooltip"
            :style="{left: dailyDataTooltip.x + 'px', top: dailyDataTooltip.y + 'px'}"
        >
          <text class="tooltip-time">{{ dailyDataTooltip.time }}</text>
          <text class="tooltip-value">{{ dailyDataTooltip.value }} {{ deviceUnit }}</text>
        </view>
      </view>

      <!-- 月度数据趋势 -->
      <view class="chart-container">
        <text class="chart-title">月度{{ deviceTitle }}趋势</text>
        <canvas
            type="2d"
            id="monthlyDeviceChart"
            canvas-id="monthlyDeviceChart"
            class="device-canvas"
            @touchstart="onChartTouch('monthly', $event)"
            @touchend="onChartTouchEnd"
        ></canvas>

        <!-- 动态数据提示框 -->
        <view
            v-if="monthlyDataTooltip.show"
            class="data-tooltip"
            :style="{left: monthlyDataTooltip.x + 'px', top: monthlyDataTooltip.y + 'px'}"
        >
          <text class="tooltip-time">{{ monthlyDataTooltip.time }}</text>
          <text class="tooltip-value">{{ monthlyDataTooltip.value }} {{ deviceUnit }}</text>
        </view>
      </view>

      <!-- 统计数据 -->
      <view class="statistics">
        <view class="stat-card today">
          <view class="stat-header">
            <view class="stat-icon today-icon">
              <img :src="`../../static/${deviceType}-日.png`" alt="">
            </view>
            <text class="stat-label">今日{{ deviceTitle }}</text>
          </view>
          <text class="stat-value">{{ todayValue }}
            <text class="unit">{{ deviceUnit }}</text>
          </text>
          <view class="stat-footer">
            <text class="stat-trend">↗ 较昨日+12%</text>
          </view>
        </view>

        <view class="stat-card month">
          <view class="stat-header">
            <view class="stat-icon month-icon">
              <img :src="`../../static/${deviceType}-月.png`" alt="">
            </view>
            <text class="stat-label">本月{{ deviceTitle }}</text>
          </view>
          <text class="stat-value">{{ monthValue }}
            <text class="unit">{{ deviceUnit }}</text>
          </text>
          <view class="stat-footer">
            <text class="stat-trend">↘ 较上月-5%</text>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import deviceDetail from "./deviceDetail";
  export default deviceDetail;
</script>

<style scoped>
  @import "deviceDetail.css";
</style>